<template>
  <g class="line"
    :class="line.cls"
    @mousedown="setTool">
  	<polyline stroke="#1296db"
      :stroke-dasharray="(line.dasharray? [5,5] : [])"
      stroke-width="2"
  		stroke-linecap="round"
      marker-end="url(#arrow)"
      fill="none"
  		class="line" :points="line.points">
    </polyline>
  	<polyline stroke="transparent"
      stroke-width="10"
      fill="none"
  		class="shadow"
      :points="line.points">
    </polyline>
  </g>
</template>

<script>
  import flow from './js/flow'
  export default {
    name: 'FlowLine',
    props: ['line', 'idx', 'setLineTool'],
    methods: {
      setTool(e) {
        let startPos = {x: this.line.from.x, y: this.line.from.y};
				let endPos = {x: this.line.to.x, y: this.line.to.y};
        let style = flow.$lineToolPos(e, this.line.type, startPos, endPos)
        this.setLineTool({show: true, style, idx: this.idx});
      }
    }
  }
</script>

<style scoped>  
  g.focus polyline.line {
    stroke: #d39b26;
    marker-end: url(#focusArrow);	
  }
  g.line:hover polyline.shadow,
  g.line:hover polyline.line {
    stroke-opacity: 0.8;
    cursor: pointer;
  }
</style>
